<template>
    <div class="app-container" style="padding: 20px;">
        <div>
            <el-button @click="()=>openAlert1()">添加</el-button>
            <el-button @click="()=>ajaxList()">刷新</el-button>
        </div>
        <el-table
                ref="multipleTable"
                :data="lists"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="(rows)=>selectRows=rows">
            <el-table-column
                    type="selection"
                    width="25">
            </el-table-column>

        <!--    <el-table-column
                    label="id" prop="id">
            </el-table-column>
-->
   <!--         <el-table-column
                    label="uuid" prop="uuid">
            </el-table-column>-->

            <el-table-column
                    label="title" prop="title">
                <template slot-scope="scope">
                    <div style="cursor: pointer" @click="()=>copyId(scope.row)">{{scope.row.title}}</div>
                </template>
            </el-table-column>

            <el-table-column
                    label="content" prop="content">
                <template slot-scope="scope">
                    <div style="overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;">{{scope.row.content}}</div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="操作"
                    fixed="right">
                <template slot-scope="scope">
                    <el-button type="text"  @click="()=>openAlert1(scope.row)">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="padding: 20px;"
                :page-size="filter.pageSize"
                layout="prev, pager, next"
                :total="filter.total"
                @size-change="(pageSize)=>{$data.filter.pageSize=pageSize;lists=[];ajaxList();}"
                @current-change="(pageNum)=>{$data.filter.pageNum=pageNum;lists=[];ajaxList();}"
        >
        </el-pagination>

    </div>
</template>
<script>

    import {copy2bang, createA, getUrlParamNative, uuid} from "../../utils/utils";




    export default {
        components: {
        },
        data() {
            return {
                filter: {
                    pageNum: 0,
                    pageSize: 10,
                    total: 0,
                    puuid:"",
                    uuid:"",
                    title:"",
                },
                lists: [],
                selectRows: [],
                showModify: false,
            }
        },
        mounted() {
            this.filter.title=getUrlParamNative("title")||''
            this.filter.uuid=getUrlParamNative("uuid")||''
            this.filter.puuid=getUrlParamNative("puuid")||''
            this.ajaxList();
        },
        methods: {
            copyId(row){
                // [1](/story/c8e21a40-59bf-4a57-b829-17679ae28cfc)
                copy2bang(`[${row.title}](/storyOne?uuid=${row.uuid})`)
                this.$message('复制id成功')
            },
            openAlert1(row){
                //如果是新增
                if(!row){
                    row={
                        title:this.filter.title,
                        uuid:uuid()
                    }
                }
                // createA(`http://localhost:8080/storyEdit?uuid=${row.uuid}&title=${row.title}&puuid=${this.filter.puuid}`,'_blank')
                parent.openAlertStoryEdit(row.title,row.uuid,this.filter.puuid)
            },
            triggerModify() {
                var _uuid = ""
                if (!row) {
                    _uuid = uuid()
                } else {
                    _uuid = row.uuid
                }
                createA(`/storyEdit?uuid=${_uuid}`)
            },
            async ajaxList() {
                var _params = {
                    ...this.filter
                }
                console.log("[get]  /story/page")
                console.log('参数', JSON.stringify(_params))
                var result = await axios.get('/story/list?pageNum='+this.filter.pageNum+'&&pageSize='+this.filter.pageSize+'', {params:_params}).then(res=>res.data).then(res => res.result)
                console.log("结果", result)
                this.lists = result.records
                this.filter.total = Number(result.total)

            }
        }
    }
</script>
